0

我需要在按钮单击时对来自 json 的值进行分组和显示。我该怎么做?这是我的 json 文件:-

{"list":[{"name":"Peppara Wild Life Sanctuary ","specific_name":"TODO","headline":"The sanctuary has a rich population of mammalian fauna and is emerging as a big attraction to wildlife enthusiasts and ornithologists.\u00a0 ","description":"Lying on the outskirts of the capital city, the Peppara Wildlife Sanctuary is spread over an area of 53 sq. km. on the Western Ghats and was established in 1938. The place is fascinating for its damsite, thick forest areas, crystal clear streams and rocky terrains ideal for adventure expeditions. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Peppara Wild Life Sanctuary_Trivandrum.jpg","district":"Thiruvananthapuram ","category_name":"Animals & Birds ","sub_category_name":"Wildlife Sanctuary ","place":"Thiruvananthapuram "},{"name":"Ponmudi ","specific_name":"TODO","headline":"A variety of wildlife inhabit the hills ","description":"Lying on the outskirts of the capital city, the Peppara Wildlife Sanctuary is spread over an area of 53 sq. km. on the Western Ghats and was established in 1938. The place is fascinating for its damsite, thick forest areas, crystal clear streams and rocky terrains ideal for adventure expeditions. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Ponmudi_Trivandrum.jpg","district":"Thiruvananthapuram ","category_name":"Hill Stations ","sub_category_name":"Hill Station ","place":"Thiruvananthapuram "},{"name":"The Padmanabhapuram Palace ","specific_name":"TODO","headline":"A magnificent wooden palace of the 16th century, Padmanabhapuram Palace lies at the land's end of mainland India - Kanyakumari ","description":"The antique interiors are replete with intricate rosewood carvings and sculptured decor. The palace also contains 17th and 18th century murals. One can see: the musical bow in mahogany, windows with coloured mica, royal chairs with Chinese carvings, 'Thaikkottaram' or the Queen Mother's palace with painted ceilings, rose wood and teak carved ceilings with 90 different floral designs. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/The Padmanabhapuram Palace_Trivandrum.jpg","district":"Thiruvananthapuram ","category_name":"Art & Culture ","sub_category_name":"Palace ","place":"Thiruvananthapuram "},{"name":"Agasthyakoodam ","specific_name":"TODO","headline":"Agasthyarkoodam (also known as\u00a0Agathiyar Malai\u00a0or\u00a0Agasthyakoodam) is a 1,868-metre (6,129\u00a0ft) tall peak within\u00a0Neyyar Wildlife Sanctuary\u00a0in the\u00a0Western Ghats\u00a0of\u00a0South India. ","description":"Agasthyarkoodam is a\u00a0pilgrimage\u00a0centre for devotees of the Hindu sage\u00a0Agastya, who is considered to be one of the seven\u00a0rishis\u00a0(Saptarishi) of\u00a0Hindu\u00a0Puranas.The shrine was installed under the auspices of the\u00a0Chenkottukonam\u00a0Madathipathi\u00a0Jagadguru\u00a0Swami Sathyananda Saraswathi\u00a0Thiruvadikal who entered the forests with\u00a0Hindu Aikya Vedi\u00a0activists and his followers especially from the\u00a0Kani\u00a0Tribe demolished the\u00a0cross\u00a0erected by Christians.The\u00a0Tamil language\u00a0is considered to be a boon from Agasthya. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Agasthyakoodam_Trivandrum.jpg","district":"Thiruvananthapuram ","category_name":"Hill Stations ","sub_category_name":"Mountain ","place":"Thiruvananthapuram "},{"name":"Somatheeram ","specific_name":"TODO","headline":"\u00a0A serene aryurvedic resort by the sea in South India ","description":"Somatheeram,\u00a0the world\u2019s first Ayurvedic resort, is one of the best tourism spots in\u00a0Kerala, India. Located at Chowara Beach on a hillock 9 km south of the famous\u00a0Kovalam Beach, Trivandrum, Kerala with over 15 acres of greenery all around. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Somatheeram_Trivandrum.jpg","district":"Thiruvananthapuram ","category_name":"Picnic Spots ","sub_category_name":"Lake ","place":"Thiruvananthapuram "},{"name":"Manaltheeram Ayurvedic Beach Village ","specific_name":"TODO","headline":"It is a picturesque beach resort ","description":"Manaltheeram Ayurveda Beach Village is the place to go if you want to plunge your senses to the whispering sea breeze, lush greenery of the surrounding flora and the murmuring surf. Leave the drudgery and monotony of the working world behind rejuvenating your body and soul at this resort that offers that little bit more, for less. \u00a0 ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/manaltheeram_Trivandrum.jpg","district":"Thiruvananthapuram ","category_name":"Ayurvedic Centres ","sub_category_name":"Mountain ","place":"Thiruvananthapuram "},{"name":"Beema Palli ","specific_name":"TODO","headline":"Beemapally, a suburb of\u00a0Thiruvananthapuram\u00a0(also known as Trivandrum), is right under the flight path of planes landing at theThiruvananthapuram airport ","description":"The mosque at Beemapally is famous for the annual Urus. It is a good shopping area too. It is well connected by State Road Transport bus service from East Fort. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Beema Palli_Trivandrum.jpg","district":"Thiruvananthapuram ","category_name":"Pilgrim Centres ","sub_category_name":"Mosque ","place":"Thiruvananthapuram "},{"name":"Mahadeva Temple ","specific_name":"TODO","headline":"Temple dedicated to Lord Siva","description":"This temple situated in the busy area of Kottayam.The legand has it that the idol there is 'Swayambu'(Self-manifested) and not installed. ","rank":"6","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Kottayam_Thirunakkara Mahadeva Temple.jpg","district":"Kottayam ","category_name":"Pilgrim Centres ","sub_category_name":"Temple ","place":"Kottayam "},{"name":"Sri Krishnaswamy Temple ","specific_name":"TODO","headline":"Temple dedicated to Lord Sree Krishna","description":"This temple is famous for the Ezhunallathu procession in which Elephants have their own part to play along with humans. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Sri Krishnaswamy Temple_Ktym.jpg","district":"Kottayam ","category_name":"Pilgrim Centres ","sub_category_name":"Temple ","place":"Kottayam "},{"name":"Bagawathy Temple ","specific_name":"TODO","headline":"The idol is made of 'Anjanakkal' ","description":"Kumaranalloor Devi temple is considered as one of the most important Devi temples among the 108 Durgalayas (Devi temples) in Kerala. The temple is said to be more than 2400 years old, as per historical and mythological evidences as well as other sources of information. The architecture of the temple is notable for the unique structure of the\u00a0nalambalam\u00a0and\u00a0sreekovil\u00a0both of which have been built in the\u00a0sreechakra\u00a0style (ring like object with a handle, which is placed in the right hand of the Devi). This kind of architecture is rarely found in temple architecture. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Bagawathy Temple_Ktym.jpg","district":"Kottayam ","category_name":"Pilgrim Centres ","sub_category_name":"Temple ","place":"Kumaranallur "},{"name":"Dakshina Mookambika Saraswathy Temple ","specific_name":"TODO","headline":"This temple is dedicated to Goddess Saraswathy -the Goddess of Arts and Learning and the consort of Lord Brahma-the God of creation.","description":"The Saraswathi Temple known as 'Dakshina Mookambika temple' is situated at Panachikkad about 10 km from Kottayam on the way to Changanasseri.The nine day festival 'navaratri' is famous here .","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Default.jpg","district":"Kottayam ","category_name":"Pilgrim Centres ","sub_category_name":"Temple ","place":"Chingavanam "},{"name":"Mahadeva Temple ","specific_name":"TODO","headline":"The temple is dedicated to Lord Shiva and here the diety is two forms vallya(Love) and Rudhra(Fury) ","description":"This temple is famous for its murals, especially the painting of Nataraja in the\u00a0gopuram\u00a0andezharaponnana\u00a0(the seven-and-a-half elephants finished in gold).\u00a0 ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Kottayam_Thirunakkara Mahadeva Temple.jpg","district":"Kottayam ","category_name":"Pilgrim Centres ","sub_category_name":"Temple ","place":"Ettumanoor "},{"name":"St. Mary's Church ","specific_name":"TODO","headline":"This Church is dedicated to St Mary,One of the most important Churches of the Malankara Jawbite Syriyan Christians","description":"St. Mary's Malankara Jacobite Syrian Orthodox Church of Dallas is under the leadership of the Patriarch of Antioch and the Archbishop of North America appointed by the Throne of Antioch. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/St. Mary's Church_Ktyn.jpg","district":"Kottayam ","category_name":"Pilgrim Centres ","sub_category_name":"Church ","place":"Mannarkad "},{"name":"St. Mary's Ferona Church ","specific_name":"TODO","headline":"The crucifix in this church is unique as it shows Jesus Christ without a single wound ","description":"The 9th century St. Mary's Church was built on land donated by the Brahmin family of Ettanasseri as thanksgiving for a male heir born to the family on praying to Virgin Mary. Leonard D'Cruz, a Portuguese sailor, brought the statue of St. Sebastian in 1687 .","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/St. Mary's Ferona Church_Ktym.jpg","district":"Kottayam ","category_name":"Pilgrim Centres ","sub_category_name":"Church ","place":"Bharananganam "},{"name":"Panchalimedu ","specific_name":"TODO","headline":"Panchalimedu, which is soaked in snow, offers tourists a panoramic view of an unending stretch of valleys and hills ","description":"Situated at an attitude of about 2500 feet above the sea level, Panchali Medu is an adventurer\u2019s slot. According to legends, \u2018Pandavas\u2019 (heroes of the epic \u2013 Mahabharata) stayed at this place, during their exile from the Kingdom. Here, a small Temple with a pond (in which Panchali - wife of the Pandavas, used to take bath) can also be seen .","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Panchalimedu_Kottayam.jpg","district":"Kottayam ","category_name":"Picnic Spots ","sub_category_name":"Trekking ","place":"Mundakkayam "},{"name":"Kesari Falls ","specific_name":"TODO","headline":"Kesari waterfall is also called as Valanjamkanam waterfalls is a small waterfall and it lies in Kottayam district","description":"Kesari Falls\u00a0 is a three-hour bus journey fromKottayam. This picturesque waterfall lies in between Kuttikanam and Murinjapuzha on the Kottayam \u2013 Kumili route. Kuttikanam, which is 4km from here, offers trekking, \u00a0an \u00a0ideal place for adventure lovers. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Kesari Falls_ktym.jpg","district":"Kottayam ","category_name":"Water bodies ","sub_category_name":"Water falls ","place":"Kuttikanam "},{"name":"Pierce Leslie Bungalow","specific_name":"TODO","headline":"Pierce Leslie Bungalow , a colonial mansion, which was found in 1862, Constructed in Portuguese, Dutch and the native building style, this mansion was the office of the coffee merchants, the Pierce Leslie and Company ","description":" The mansion is characterised by arched doorways, wood panels on the roof of the ground floor and carved doors..The major attraction of this mansion is the water front veranda and the cascade balcony. Located near Fort Kochi, around 13 km from Ernakulam, this mansion can be reached by hiring taxis from the Kochi city. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Pierce Leslie Bungalow_Ernakulam.jpeg","district":"Ernakulam ","category_name":"Art & Culture ","sub_category_name":"Building ","place":"Ernakulam "},{"name":"Koder House","specific_name":"TODO","headline":"Koder House\u00a0Apart from the coloniel architecture, luxury furnitures and high beds, warm hospitality is what we loved ","description":"This is again an 18th century edifice of elegance built by Samuel S.Koder of the Cochin Electric Company.The architecture here emphasises the advent of Indo-European style cover the colonial type. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Koder House_Ernakulam.jpeg","district":"Ernakulam ","category_name":"Art & Culture ","sub_category_name":"Building ","place":"Ernakulam "},{"name":"Delta Study","specific_name":"TODO","headline":"Once a warehouse, this heritage bungalow built in 1808, houses a high school today ","description":"Founded in 1976 as a public trust registered under the Travancore Cochin Literary, Scientific and Charitable Societies Act of 1955, the Delta Schools Society established the prestigious Delta Study in a humble manner, in a rented building, to impart the wealth of knowledge to the budding generation of Cochin. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Delta Study_Ernakulam.jpeg","district":"Ernakulam ","category_name":"Art & Culture ","sub_category_name":"Building ","place":"Ernakulam "},{"name":"St. Francis Church","specific_name":"TODO","headline":"St.\u00a0Francis Church\u00a0in Kochi has great historical significance stands as an evidence of the European colonial struggle in India ","description":"Fort Cochin is believed to be the oldest European Settlement in India and St. Francis Church was the first European Church to be built in India. The history of this Church reflects the colonial struggle of European powers in India, from the 15th to 20th Centuries. The Portuguese Vasco da Gama was the first European to discover the sea route to India .","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/St. Francis Church _Ernakulam.jpeg","district":"Ernakulam ","category_name":"Pilgrim Centres ","sub_category_name":"Church ","place":"Ernakulam "},{"name":"Vasco House","specific_name":"TODO","headline":"Vasco House\u00a0The sixteen century house is believed to be the residence of vasco da gama and also in one of the oldest structures of Fort\u00a0cochin ","description":"Believed to have been the residence of Vasco da Gama, this is one of the oldest Portuguese residences in Fort Kochi. Built in the early sixteenth century, Vasco House sports the typical European glass paned windows and balcony cum verandahs characteristic of the times. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Vasco House _Ernakulam.jpeg","district":"Ernakulam ","category_name":"Art & Culture ","sub_category_name":"Building ","place":"Ernakulam "},{"name":"VOC Gate","specific_name":"TODO","headline":"VOC Gate is a large wooden gate facing the\u00a0Parade Ground\u00a0in\u00a0Fort Kochi ","description":"The VOC Gate, facing the Parade Ground, is another landmark of Fort Kochi. Built in 1749 by the Dutch East India Company, the gate carries a monogram VOC; hence the name. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/VOC Gate _Ernakulam.jpeg","district":"Ernakulam ","category_name":"Art & Culture ","sub_category_name":"Building ","place":"Ernakulam "},{"name":"The Bishop's House","specific_name":"TODO","headline":"The Bishop's House\u00a0was built as the residence of the Portuguese Governor in 1506 and is situated on a small hillock near the Parade Ground at Fort\u00a0Kochi\u00a0 ","description":"Bishop\u2019s House is situated on a small hillock near the Parade Ground. It can boast of a history as interesting as that of the old churches like the St Francis Church and the Santa Cruz Basilica ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/The Bishop's House _Ernakulam.jpeg","district":"Ernakulam ","category_name":"Art & Culture ","sub_category_name":"Building ","place":"Ernakulam "},{"name":"Fort Immanuel","specific_name":"TODO","headline":"Fort Immanuel, in Fort Kochi, was built by the Portuguese in the 1500s ","description":"This bastion of the Portuguese in Kochi was a symbol of the strategic alliance between the Maharajah of Kochi and the Monarch of Portugal, after whom it was named. Built in 1503, the fort was reinforced in 1538. By 1806 the Dutch, and later the British, had destroyed most of the fort walls and its bastions. Today, remains of this once imposing structure can be seen along the beach. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Fort Immanuel_Ernakulam.jpg","district":"Ernakulam ","category_name":"Art & Culture ","sub_category_name":"Fort","place":"Ernakulam "},{"name":"David Hall","specific_name":"TODO","headline":"David Hall, reminiscent of the Dutch glory of yesteryears, is situated on one side of the Parade Ground in Fort Kochi ","description":"The history and architectural grandeur of the halls woos many visitors. It also houses an art gallery and acts as a cultural centre to support young exponents of visual and performing art forms. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/David Hall_Ernakulam.jpg","district":"Ernakulam ","category_name":"Art & Culture ","sub_category_name":"Building ","place":"Ernakulam "},{"name":"The Cochin Club","specific_name":"TODO","headline":"The Cochin Club is one of the prominent clubs. Situated opposite the St Francis Church and within a beautiful garden, the club was earlier known as English Club ","description":"Records say that Cochin Club was a venue for large gatherings of the British and that its members were the elite of Kochi. Wednesdays and Saturdays were the club days. Many who featured in the commercial history of Kochi such as the highly placed officials of companies like Pierce Leslie and Aspinwall were members. ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/The Cochin Club_Ernakulam.jpg","district":"Ernakulam ","category_name":"Art & Culture ","sub_category_name":"Building ","place":"Ernakulam "},{"name":"Madiyankulam Durga Temple ","specific_name":"TODO","headline":"Madiyankulam Durga Temple\u00a0at Kanhangad, Kasargod district of Kerala is famous for its Bhutha Dance (Pootham) ","description":"\u00a0This temple dedicated to Bhadrakali the Goddess for Bravery, hosts two grand annual festivals, one in May and June and the other in December and January. 'Bootham' a famous form of dance is the highlight of the festival.\u00a0\u00a0 ","rank":"0","mobile":"","phone":"","fax":"","email_id":"","website":"","visiting_hours":"","image_url":"http://itprof.in/keralatourism/yii/demos/keralatourism/images/AttractionImageGallery/Default.jpg","district":"Kasargod ","category_name":"Pilgrim Centres ","sub_category_name":"Temple ","place":"Kasargod "}]}

在这个 json 中,有一个名为 'category_name' 的键。每个 category_name 都有不同的值。每个 category_name 都有不同的按钮(例如:艺术和文化、朝圣中心等)。所以当我点击这些按钮时,只需要显示相应按钮的详细信息。我该如何实施?

我的商店的代码是:

Ext.define('tourism.store.AttractionMasters',{
    extend:'Ext.data.Store',
    requires:[
        'tourism.model.AttractionMaster',
        'Ext.data.proxy.JsonP',
        'Ext.data.reader.Json'
    ],
    config:{
        autoLoad:true,
        model:'tourism.model.AttractionMaster',
        proxy:{
            type:'ajax',
            model: 'tourism.model.AttractionMaster',
            url:'app/data/attractionmaster.json',

           reader:{
                type:  'json',
                rootProperty: 'list'

            }            
        }
    }
  }
);

按钮点击的视图是:

Ext.define('tourism.view.ArtandCulture',{
    extend:'Ext.List',
    xtype:'artandculturelist',
    config:{
        title:'Arts and Culture',
        itemTpl:[
            '<img src="{image_url}" width="100px" height="100px">',
            '{name}','{category_name}'
        ],
        store:'AttractionMasters',
        onItemDisclosure:true
    }
});
4

1 回答 1

2

anu,尝试将以下内容添加到商店中的配置中:

config:{
    autoLoad:true,
    groupField: 'category_name',
    model:'tourism.model.AttractionMaster',
    proxy:{
        type:'ajax',
        model: 'tourism.model.AttractionMaster',
        url:'app/data/attractionmaster.json',

       reader:{
            type:  'json',
            rootProperty: 'list'

        }            
    }
}

应该希望工作..

于 2012-10-29T20:17:32.987 回答